<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门升级</title>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        <div>姓名：{{name}}</div>
        <div>班级：{{classRoom}}</div>
        <button onclick="hi()">打招呼</button>
        <button onclick="update()">修改班级</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
  let vm = new Vue({
    el:"#div",
    data:{
        name:"灭霸",
        classRoom:"泰坦星"
    },
    methods:{
        show1:function(){
            console.log("你好灭霸");
        },
        show2(){
            this.classRoom="地球"
        }
    }
  });

  function hi(){
    vm.show1();
  };
  function update(){
    vm.show2();
  }

</script>
</html>